<template>
<div>
    <div class="l_history" v-if="user!=null">
        <div class="his_t" v-if="!collectsNo">
          <span class="fl">收藏夹</span>
          <span class="fr" @click="clearCollects">
            <button class="clearButton">清空</button>
        </span>
        </div>
        <div  class="his_t" v-if="collectsNo">收藏夹无商品</div>
        <ul>
          <li v-for="product in productCollects" :key="product.id">
            <div class="delete-button" style="float:right;margin-right: 5px;">
      <el-button type="text" @click="deleteProduct(product.id)" >
      <i class="el-icon-close" style="color: red;"></i>
    </el-button>
      </div>
            <div class="img">
                <router-link  :to="{name:'productDetail', query:{id:product.id}}">
                <img :src="`http://192.168.1.146:8088/${product.fileName}`" width="185" height="162"/>
            </router-link>
            </div>
            <div class="name"> <router-link  :to="{name:'productDetail', query:{id:product.id}}">{{ product.name }}</router-link></div>
            <div class="price">
              <font>￥<span>{{ product.price }}</span></font> &nbsp; 18R
            </div>
          </li>
        </ul>
      </div>
      <div class="his_t"  v-else>
        <span class="fl">登录后方可查看收藏</span>
        </div>

         <!--Begin 弹出层-收藏成功 Begin-->
    <div id="fade" class="black_overlay" :class="{ show: showCollect }"></div>
    <div id="MyDiv" class="white_content" :class="{ show: showCollect }">
      <div class="white_d">
        <div class="notice_t">
          <span
            class="fr"
            style="margin-top: 10px; cursor: pointer"
            @click="closeCollect"
            ><img src="http://192.168.1.146:8088/close.gif"
          /></span>
        </div>
        <div class="notice_c">
          <table
            border="0"
            align="center"
            style="margin-top: "
            cellspacing="0"
            cellpadding="0"
          >
            <tr valign="top">
              <td width="40">
                <img src="http://192.168.1.146:8088/suc.png" />
              </td>
              <td>
                <span
                  style="color: #3e3e3e; font-size: 18px; font-weight: bold"
                  >{{ collectResult }}</span
                ><br />
            
              </td>
            </tr>
            <tr height="50" valign="bottom">
              <td>&nbsp;</td>
              <td><a href="#" class="b_sure" @click="closeCollect">确定</a></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <!--End 弹出层-收藏成功 End-->
    </div>
</template>

<script>
export default {
name:"ProductCollect",
data(){
    return {
      productCollects:{},
      collectsNo:false,
      showCollect: false,
      collectResult: "",
    };
  },
  methods: {    
    getCollectByUserId(){
    
        if(this.user==null){
          return ;
        }
        this.$axios({
            url:"api/product/getCollects",
            data:{
                id:this.user.id
            },
            method:"post"
        }) .then((rs) => {
          console.log(rs);
          if(rs.data.result!="无收藏"){
              this. productCollects=rs.data.result;
          }else{
            this.productCollects="";
            this.collectsNo=true;
          }
        })
        .catch((error) => {
          console.error(error);
        });
    },clearCollects(){
        if(!confirm("是否确认清空")){
            return false;
        }
        this.$axios({
            url:"api/product/clearAllCollects",
            data:{
                id:this.user.id
            },
            method:"post"
        }) .then((rs) => {
        alert(rs.data.result);
        this.getCollectByUserId();
        })
        .catch((error) => {
          console.error(error);
        });
    } ,addCollect(productId) {
      if (this.user == null) {
        alert("请登录");
        return;
      }
      this.$axios({
        method: "post",
        data: {
          userId: this.user.id,
          productId:productId,
        },
        url: "api/product/addCollect",
      })
        .then((rs) => {
          console.log(rs);
          this.collectResult = rs.data.result;
          this.showCollect = true;
          
           this.getCollectByUserId();
        })
        .catch((error) => {
          console.error(error);
        });
    },
    closeCollect() {
      this.showCollect = false;
    },deleteProduct(id){
      if(!confirm("是否确认删除")){
                    return ;
            }
            this.$axios({
            url:"api/product/deleteCollect",
            data:{
                productId:id,
                userId:this.user.id,
            },
            method:"post"
        }) .then((rs) => {
            if(rs.data.result=="删除成功"){
                this.getCollectByUserId();
            }
        })
        .catch((error) => {
          console.error(error);
        });
    }
  },computed: {
    token() {
      return sessionStorage.getItem("token") || null;
    },
    user() {
      try {
        // 当token存在时才解析user
        if (this.token) {
          const userData = sessionStorage.getItem("user");
          return userData ? JSON.parse(userData) : null;
        }
        return null;
      } catch (e) {
        console.error("解析用户数据失败", e);
        return null;
      }
    },
  },  mounted() {
  this.getCollectByUserId();
  },
}
</script>

<style>
.clearButton {
  /* 移除按钮的边框和背景 */
  border: none;
  background: transparent;
  /* 设置字体样式（可选） */
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #333; /* 设置默认文字颜色 */
  cursor: pointer; /* 鼠标悬停时显示为手型 */
  outline: none; /* 点击时不显示轮廓 */
  transition: color 0.3s; /* 平滑过渡颜色变化 */
}

.clearButton:hover {
  /* 鼠标悬停时改变文字颜色 */
  color: #007bff;
}
.show {
  display: block;
}

</style>